<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>合规申请</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css">
    <script type="text/javascript" charset="utf-8" src="../layui/xm-select1.js"></script>
    <link rel="stylesheet" href="../layui-v2.9.8/layui/css/layui.css">
    <script src="../layui-v2.9.8/layui/layui.js"></script>
<!--    <script src="../layui/layui.js"></script>-->
    <style type="text/css">
        @media screen and (max-width: 767px) {
            body div{
                margin: 0!important;
            }
           #complianceForm{
               width: 95%;
               font-size: 0.7rem!important;
               padding-bottom: 30px;
           }
            #complianceForm div,#ID-upload-demo-btn-2,#ID-upload-demo-files,.layui-upload-list{
                width: 100%!important;
                padding-left: 0px!important;
                font-size: 0.7rem!important;
            }
            #ID-upload-demo-btn-2,#ID-upload-demo-files{
                max-width: 180px!important;
            }
            .layui-table th{
                padding: 9px 0 9px 5px;
                font-size: 0.7rem;
            }
            .layui-form-label{
                font-size: 0.7rem;
                padding: 10px 0px 5px 10px !important;
                text-align: left;
            }
            p{
                padding:10px 0 10px 5px!important;
            }
            .layui-btn{
                height: 25px;
                line-height: 25px;
                dding: 0 8px;
                font-size: 0.7rem;
                margin-top: 5px;
                margin-left: 5px
            }
            #copyPersonSelect{
                padding-left: 5px;
            }
            .xm-tips{
                margin-left: 10px!important;
            }

        }
    </style>
    <script>
        function deleteprocess() {
            // 创建表单数据对象
            var formData = new FormData();
            formData.append("id", layui.$("#formid").val());
            // 使用sendBeacon方法发送异步请求
            navigator.sendBeacon("/process/delete", formData);
        }
        layui.use(['dropdown', 'util', 'layer'], function() {
            var $ = layui.$
            var upload = layui.upload;
            var xm
            var keys=[]
            var form = layui.form;
            var imgfiles=[];
            var videofiles=[];
            window.addEventListener("beforeunload",deleteprocess);
            //自定义验证规则
            form.verify({
                telephone: function(value){
                    if(value.length < 1){
                        return '必填';
                    }
                    if (!/^1[3456789]\d{9}$/.test(value)){
                        return  "请输入正确电话号码"}
                },
            });
            $(document).on('click', '.baseimg', function() {
                // 图片的src
                var src = this.src;
                // 拼接img标签 设置width height src属性值
                var img_show = "<img width='" + 600 + "' height='" + 600 + "' border='0' src='" + src +
                    "' />";
                bigImgIndex = layer.open({
                    content: img_show,
                    type: 1,
                    // offset: ["800px", "800px"],
                    title: false,
                    area: ['auto', 'auto'],
                    shade: 0,
                });
            });
            $.ajax({
                url: "/user/queryforselect",
                type: "post",
                async: true,
                success: function (data) {
                    if(data.data){
                        for (var i = 0; i < data.data.length; i++) {
                            var temp = {
                                "name": data.data[i].realName,
                                "value": data.data[i].username  //value为唯一标识，此处为id
                            }
                            keys.push(temp)
                        }
                        xm=xmSelect.render({
                            el: '#copyPersonSelect',
                            direction: 'up',
                            filterable: true,
                            data: keys
                        })
                    }
                },
            });
            form.on('submit(submitForm)', function(data){
                var formData = new FormData(document.getElementById('complianceForm'));
                var copyPersons = xm.getValue();
                if (imgfiles.length<1){
                    layer.msg("请输入图片文件");
                    return false;
                }
                if (videofiles.length<1){
                    layer.msg("请输入音频文件");
                    return false;
                }
                if (copyPersons.length<1){
                    layer.msg("请输入抄送人");
                    return false;
                }
                // formData.append("id", $('input[name="id"]').val())
                formData.append("copyPersons",JSON.stringify(copyPersons))
                // formData.append("person", $('input[name="person"]').val())
                // formData.append("auditingPerson", $("#auditingPerson").val())
                // formData.append("name", $('input[name="name"]').val())
                // formData.append("department", $('input[name="department"]').val())
                // formData.append("telephone", $('input[name="telephone"]').val())
                for (var i = 0; i < imgfiles.length; i++) {
                    formData.append("imgfiles", imgfiles[i])
                }
                for (var i = 0; i < videofiles.length; i++) {
                    formData.append("videofiles", videofiles[i])
                }
                var sindex=layer.load(2, {shade: [0.5,'#000']});
                $.ajax({
                	url: '/process/complianceadd',
                	type: 'POST',
                	processData: false,
                	contentType: false,
                    cache: false,
                	data: formData,
                	success: function(response) {
                	    window.removeEventListener("beforeunload",deleteprocess);
                        layer.close(sindex)
                      location.href="/processadd"
                	},
                	error: function(xhr, status, error) {
                        layer.close(sindex)
                	}
                });
                return false;
            });
            var imgupload = upload.render({
                elem: '#ID-upload-demo-btn-2',
                url: 'https://httpbin.org/post',//这个没用随便写一下
                auto: false,
                bindAction: '#ID-upload-demo-files-action',
                multiple: true,
                number: 5,
                exts: 'jpg|png|jpeg',
                choose: function (obj) {
                    imgupload.config.elem.next()[0].value = '';
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        imgfiles.push(file)
                        $('#upload-demo-preview').append('<img class="baseimg"  src="' + result + '" alt="' + file
                            .name + '" style="width: 90px; height: 90px;">')
                    });
                },
                done: function (res) {
                }
            });
            $(document).on('click', '#ID-upload-demo-btn-2', function(data) {
                $('#upload-demo-preview').empty()
                imgfiles=[]
            });
            // 制作多文件上传表格
            var  videoupload = upload.render({
                elem: '#ID-upload-demo-files',
                elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
                url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                accept: 'file',
                multiple: true,
                number: 5,
                auto: false,
                 exts: 'mp3|wav',
                bindAction: '#ID-upload-demo-files-action',

                choose: function(obj) {
                    videoupload.config.elem.next()[0].value = '';
                    var that = this;
                    var files = this.files = obj.pushFile();
                    // 读取本地文件
                    obj.preview(function(index, file, result) {
                        videofiles.push(file);
                        var tr = $(['<tr id="upload-' + index + '">',
                            '<td>' + file.name + '</td>',
                            '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>',
                            '<td>',
                            '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                            '<button type="button" data-id="' + index +
                            '"class="layui-btn layui-btn-xs  layui-btn-normal demo-play">播放</button>',
                            '</td>',
                            '</tr>'
                        ].join(''));

                        that.elemList.append(tr);
                    });
                },

            });
            $(document).on('click', '.demo-play', function(data) {
                var index = $(this).attr('data-id');

                var file = videoupload.config.files[index]
                var fileReader = new FileReader();
                fileReader.onload = function(event) {
                    var audioURL = event.target.result;
                    $('#audioPlayer').attr('src', audioURL);
                };
                fileReader.readAsDataURL(file);

            });
            $(document).on('click', '#ID-upload-demo-files', function(data) {
                videofiles=[]
                $('#ID-upload-demo-files-list').empty()
            });
        });
    </script>
</head>
<body>
<div style="margin: 20px;">
    <form class="layui-form" id="complianceForm" action="/process/complianceadd" enctype="multipart/form-data" method="post">
        <div style="display: none"><input type="text"name="id"id="formid" th:value="${id}"></div>
        <div id="first" style="display: flex;">
            <div>
                <label class="layui-form-label">客户姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="required" class="layui-input"  autocomplete="off"  lay-affix="clear">
                </div>
            </div>
        </div>
        <div id="second" style="display: flex;">
            <div>
                <label class="layui-form-label">客户手机号</label>
                <div class="layui-input-inline">
                    <input type="text" name="telephone" lay-verify="required||telephone"  class="layui-input"  autocomplete="off"  lay-affix="clear">
                </div>
            </div>
        </div>
    <div id="third" style="display: flex;">
        <div>
            <label class="layui-form-label">审核人</label>
            <div class="layui-input-inline">
                <select id="auditingPerson" name="auditingPerson" lay-verify="required">
                    <option value=""></option>
                    <option th:each="BaseUser : ${lb}"th:value="${BaseUser.username}" th:text="${BaseUser.realName}"></option>
                </select>
            </div>
        </div>
    </div>
        <div style="padding-left: 22px;"  class="layui-upload">
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
                预览图：
                <div class="layui-upload-list" id="upload-demo-preview"></div>
            </blockquote>
            <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
                <i class="layui-icon layui-icon-upload"></i>图片文件上传(jpg,png,jpeg)
            </button>
        </div>
        <div style="padding-left: 22px;"    class="layui-upload">
            <div class="layui-upload-list">
                <table class="layui-table">
                    <colgroup>
                        <col style="min-width: 100px;">
                        <col width="150">
                        <col width="260">
                        <col width="150">
                    </colgroup>
                    <thead>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>操作</th>
                    </thead>
                    <tbody id="ID-upload-demo-files-list"></tbody>
                </table>
            </div>
            <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-files"
                    lay-options="{accept: 'audio'}">音频文件上传(mp3,wav)</button>
        </div>
        <p style="padding-left: 22px;">抄送给</p>
        <div style="padding-left: 22px;">
            <div id="copyPersonSelect" class="xm-select-demo"></div>
        </div>
        <div style="padding-left: 22px;" >
            <button  class="layui-btn" lay-submit lay-filter="submitForm">立即提交</button>
        </div>
    </form>

</div>
<audio autoplay id="audioPlayer">
    您的浏览器不支持音频播放。
</audio>

</body>
</html>